<template>
	<view class="x-image"  :style="{...setStyle,...customStyle}" >
		<slot v-if="useSlot"></slot>
	</view>
</template>

<script>
	export default {
		props:{
			width:{
				type:String,
				default:'120rpx'
			},
			height:{
				type:String,
				default:'120rpx'
			},
			src:{
				type:String,
				default:'https://cdn.uviewui.com/uview/common/logo.png'
			},
			mode:{
				type:String,
				default:'cover'
			},
			radius: { 
				type:String,
				default:'0'
			},
			customStyle:{
				type:Object,
				default:()=>{}
			},
			useSlot:{
				type:Boolean,
				default:false
			}
		},
		computed:{
			setStyle() {
				var stylesheet = {
					width:this.width,
					height:this.height,
					"border-radius":this.radius,
				};
				this.src && Reflect.set(stylesheet,'background-image',`url(${this.src})`);
				this.src && Reflect.set(stylesheet,'background-size',this.mode);
				return stylesheet;
			}
		},
		data() {
			return {
				
			};
		}
	}
</script>

<style lang="scss">
.x-image {
}
</style>
